@charset 'UTF-8';
body,
html
{
    margin: 0;
    padding: 0;
}

.a
{
    background-color: #ecffff;
}

.b
{
    background-color: #fff7fb;
}

.c
{
    background-color: #fff4c1;
}

.d
{
    background-color: #c7c7e2;
}
/* flex3 */
.list
{
    display: flex;

    width: 200px;
    height: 200px;

    background-color: #abcdef;

    flex-flow: row wrap;
    align-content: flex-start;
}

.item
{
    box-sizing: border-box;
    height: 50px;

    flex: 0 0 25%;
}
/* flex4 */
/* body高度需要100% */
.flex4
{
    display: flex;
    flex-direction: column;

    height: 100%;
}

.header
{
    height: 50px;

    background-color: #999;
}
.main
{
    display: flex;

    flex: 1;
}
.flex4-left
{
    overflow-x: hidden;
    overflow-y: auto;

    height: 100%;

    background-color: #abcdef;

    flex: 0 0 200px;
}

.flex4-left::-webkit-scrollbar
{
    display: none;
}

.flex4-right
{
    overflow-x: hidden;
    overflow-y: auto;

    height: 100%;

    background-color: pink;

    flex: 1 1 auto;
}

.flex4-right::-webkit-scrollbar
{
    display: none;
}

.footer
{
    height: 50px;

    background-color: #666;
}
